<template>
  <div>
    <el-collapse-transition>
    <el-row :gutter="10">
      <el-col :xs="0" :sm="4" :md="5" :lg="6" :xl="6"></el-col>
      <el-col :xs="24" :sm="16" :md="14" :lg="12" :xl="12">
        <el-card class="col-sm-12">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/blog' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>详情</el-breadcrumb-item>
          </el-breadcrumb>

          <h1>{{ post.title }}</h1>
          <p>{{ post.introduction }}</p>
          <p class="heat">热度: {{post.heat}}</p>
          <p class="time">{{post.time}}</p>
          <p class="author">作者:{{post.username}}</p>
          <el-button type="success" icon="el-icon-caret-top" circle @click="like()" :disabled="isLiked"></el-button>
        <h5>评论</h5>
          <el-form status-icon :model="commentForm" class="demo-ruleForm" ref="commentForm">
            <el-form-item prop="content">
              <el-input v-model="commentForm.content" size="medium" style="width: 60%" placeholder="输入你想评论的内容"></el-input>
              <el-button type="primary" @click="SubmitComment()" style="margin-left: 20px">提交</el-button>
            </el-form-item>

          </el-form>
        <ul class="list-group" v-if="showCommentBox">
          <li v-for="comment in comments" class="list-group-item">
            <strong>{{ comment["username"] }}</strong>
            <br>
            <em>评论:</em> {{ comment["comment"] }}
            <p class="time">
              {{ comment["time"]  }}
            </p>
            <br>
          </li>
        </ul>
        </el-card>
      </el-col>
      <el-col :xs="0" :sm="4" :md="5" :lg="6" :xl="6"></el-col>
    </el-row>
    </el-collapse-transition>
  </div>
</template>

<script>
import Header from "@/components/header";
export default {
  components: {Header},
  data() {
    return {
      isLiked:false,
      post:[],
	  	comments: [],
			showCommentBox: true,
      commentForm: {
        content: '',
        user_id:'',
        dis_id:''
      },
      // rules:{
      //   content:[
      //     {required :true , message: '请输入评论内容' ,trigger:'blur'},
      //   ],
      // }
    }
  },
  created() {
    let form = {id: this.$route.params.id};
    this.$http.post("http://localhost:8081/post", form)
        .then(response => response.json(), error => console.log(error))
        .then(json => this.post = json, error => console.log(error));

    this.$http.post("http://localhost:8081/click", form)
        .then(response => response.json(), error => console.log(error));

    // showComments(){
    this.$http.post("http://localhost:8081/comment", form)
        .then(response => response.json(), error => console.log(error))
        .then(json => this.comments = json.message, error => console.log(error))
        .then(() => this.showCommentBox = true);
    // },
  },
  methods: {
    SubmitComment () {
      if(this.commentForm.content===""){
        this.$message.error("评论不可为空");
        return;
      }
      const loadingObj=this.$loading({
        lock:true,
        text:"提交中...",
        spinner:"el-icon-loading",
        background:"rgba(0,0,0,0.5)",
        target:document.querySelector(".submit-test-dialog")
      })
      this.commentForm.user_id = sessionStorage.getItem('id');
      this.commentForm.dis_id = this.$route.params.id;
      this.$http.post('http://localhost:8081/commentBlog',this.commentForm)
          .then(res => res.json(), error => console.log(error))
          .then(() => {
            this.update();
            this.commentForm.content="";
            loadingObj.close();
          });
    },
    like(){
      let form = {id: this.$route.params.id};
      this.$http.post('http://localhost:8081/like',form);
      this.$http.post("http://localhost:8081/post", form)
          .then(response => response.json(), error => console.log(error))
          .then(() => {
            this.update();
          });
      this.isLiked=true;
    },
    update(){
      let form = {id: this.$route.params.id};
      this.$http.post("http://localhost:8081/post", form)
          .then(response => response.json(), error => console.log(error))
          .then(json => this.post = json, error => console.log(error));
      this.$http.post("http://localhost:8081/comment", form)
          .then(response => response.json(), error => console.log(error))
          .then(json => this.comments = json.message, error => console.log(error))
          .then(() => this.showCommentBox = true);
    }
  }

}
</script>

<style>
.time {
  text-align: right;
  font-size: 8px;
  color: blueviolet;
}
.el-card{
  margin-top: 10px;
  width: 80%;
  position:absolute;
  margin-left: 15px;
}
.author {
  font-size: 13px;
  color: #999;
}
.heat {
  font-size: 8px;
  color: red;
}
</style>
